<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能问答 - 天气预测分析系统</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet"> <!-- 引入Roboto字体 -->
    <style>
        body {
            background-color: #000; /* 页面背景为黑色 */
            color: #fff; /* 默认文字颜色为白色 */
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .chat-container {
            width: 100%; /* 宽度占满整个屏幕 */
            height: 100%; /* 高度占满整个屏幕 */
            background: linear-gradient(to bottom right, #4996E7, #533CFF, #AE26CE); /* 使用提供的颜色渐变 */
            border-radius: 10px;
            padding: 70px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .chat-header {
            text-align: center;
            font-size: 36px; /* 标题字体大小调整为36px */
            margin-bottom: 20px; /* 标题与对话框之间的间距 */
            color: #fff; /* 标题颜色为白色 */
            margin-top: 30px;
        }

        .chat-box {
            width: 70%;
            height: 70%;
            align-self: center;
            overflow-y: auto;
            border: 1px solid #333;
            border-radius: 10px;
            background-color: #000; /* 大对话框背景改为黑色 */
            color: #fff; /* 大对话框文字改为白色 */
            padding: 10px;
            margin-bottom: 10px;
        }

        .chat-box .message {
            display: flex;
            align-items: flex-end;
            margin-bottom: 10px;
        }

        .chat-box .user-message {
            flex-direction: row-reverse;
        }

        .chat-box .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-left: 10px;
            margin-right: 10px;
        }

        .chat-box .user-avatar {
            background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.5863116463eee488b6452728e1236829?rik=0WOrhqkMBWPUvw&riu=http%3a%2f%2fm.imeitou.com%2fuploads%2fallimg%2f2019011411%2fa1o5rtustxr.jpg&ehk=5IHNp1dTL7nvLoU1Bdz7j7wLpTC8ZvIFxuXQDa31pzo%3d&risl=&pid=ImgRaw&r=0'); /* 用户头像图片 */
            background-size: cover;
        }

        .chat-box .bot-avatar {
            background: linear-gradient(to bottom right, #4996E7, #533CFF, #AE26CE); /* AI头像使用提供的颜色渐变 */
            color: #fff; /* AI头像文字颜色 */
            font-family: 'Roboto', sans-serif; /* 使用Roboto字体 */
            font-size: 18px; /* 字体大小 */
            font-weight: 700; /* 字体加粗 */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chat-box p {
            max-width: 60%;
            padding: 5px 10px;
            border-radius: 10px;
            background-color: #fff; /* 消息框背景改为白色 */
            color: #000; /* 消息框文字改为黑色 */
        }

        .user-msg {
            background-color: #fff; /* 用户消息背景为白色 */
            color: #000; /* 用户消息字体为黑色 */
            text-align: right;
        }

        .bot-msg {
            background-color: #fff; /* AI消息背景为白色 */
            color: #000; /* AI消息字体为黑色 */
            text-align: left;
        }

        .input-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            width: 70%;
            align-self: center;
        }

        .input-container input[type="text"] {
            width: 75%;
            padding: 10px;
            border: 1px solid #333;
            border-radius: 5px;
            background-color: #fff; /* 文本框背景为白色 */
            color: #000; /* 文本框字体为黑色 */
        }

        .input-container button {
            width: 20%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #a5b4fc; /* 发送按钮背景为浅蓝色 */
            color: #000; /* 发送按钮字体为黑色 */
            cursor: pointer;
        }

        .input-container button:hover {
            background-color: #8eaafc; /* 发送按钮悬停效果 */
        }

        /* 新增返回首页的样式 */
        .home-link {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 18px;
            color: #fff;
            text-decoration: none;
        }

        .home-link:hover {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <!-- 新增返回首页的超链接 -->
        <a href="/userApp/index" class="home-link">首页 > AI智能问答</a>
{#        <a class="home-link"> > AI智能问答</a>#}
        <div class="chat-header">AI智能问答 - 天气预测分析系统</div>
        <div class="chat-box" id="chat-box">
            <div class="message">
                <div class="avatar bot-avatar">Ai</div>
                <p class="bot-msg">您好！我是AI助手，我可以为您提供基于大数据的天气预测分析。</p>
            </div>
        </div>
        <div class="input-container">
            <input type="text" id="user-input" placeholder="请输入您的问题..." autocomplete="off">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>

    <script>
        function sendMessage() {
            const userInput = document.getElementById('user-input').value.trim();
            if (userInput === '') return;

            const chatBox = document.getElementById('chat-box');

            // 用户消息
            const userMessageDiv = document.createElement('div');
            userMessageDiv.className = 'message user-message';
            const userAvatar = document.createElement('div');
            userAvatar.className = 'avatar user-avatar';
            const userText = document.createElement('p');
            userText.className = 'user-msg';
            userText.textContent = userInput;
            userMessageDiv.appendChild(userAvatar);
            userMessageDiv.appendChild(userText);
            chatBox.appendChild(userMessageDiv);

            // 模拟AI回复
            setTimeout(() => {
                const botMessageDiv = document.createElement('div');
                botMessageDiv.className = 'message';
                const botAvatar = document.createElement('div');
                botAvatar.className = 'avatar bot-avatar';
                botAvatar.textContent = 'AI'; // AI头像文字
                const botText = document.createElement('p');
                botText.className = 'bot-msg';
                botText.textContent = `正在分析您的问题：${userInput}...`;
                botMessageDiv.appendChild(botAvatar);
                botMessageDiv.appendChild(botText);
                chatBox.appendChild(botMessageDiv);
                chatBox.scrollTop = chatBox.scrollHeight;
            }, 500);

            document.getElementById('user-input').value = '';
        }

        // 监听回车键发送消息
        document.getElementById('user-input').addEventListener('keydown', function(event) {
            if (event.key === 'Enter') { // 检测是否按下回车键
                sendMessage(); // 调用发送消息函数
                event.preventDefault(); // 阻止默认行为（避免换行）
            }
        });
    </script>
</body>
</html>